import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import PropertyEditor from './PropertyEditor';
import HandleField from './HandleField';
import {
	updateDetail,
	createRelationShip,
	getListNodes,
	getNode,
	getRelationById,
	clear
} from '../../action';

const styles = {
	wrapper: {
		height: '100%'
	},
	main: {
		display: 'flex',
		height: 'calc(100% - 100px)'
	},
	comTitle: {
		minWidth: 100,
		width: 100,
    textAlign: 'center',
    fontSize: 18,
    fontWeight: 'bold',
    lineHeight: '40px',
    color: 'rgb(119, 119, 119)',
    background: 'rgb(232, 235, 237)'
	},
	workSpaceTitle: {
		width: 'calc(100% - 335px)',
		lineHeight: '40px',
		fontSize: 18,
		fontWeight: 'bold',
		paddingLeft: 20,
    background: 'rgb(243, 245, 246)'
	},
	propertyTitle: {
		minWidth: 400,
    width: 400,
    background: 'rgb(232, 235, 237)',
    fontSize: 18,
    lineHeight: '40px',
    textAlign: 'center',
    fontWeight: 'bold',
    color: '#777'
	}
}
import { Row, Col, Button } from 'antd';

class RelationCreator extends Component {
	constructor(props) {
		super(props);
		this.state = {
			formType: '',
			selectedComId: ''
		}
	}
	static defaultProps = {
		handleType: 'create'
	}
	componentDidMount() {
		// if (this.props.handleType === 'edit') {
		// 	this.props.dispatch(getRelationById(this.props.id));
		// }
		this.props.dispatch(getListNodes());
	}
	componentWillUnmount() {
		this.props.dispatch(clear());
	}
	updateFormType = (type, id) => {
		this.setState({
			formType: type,
			selectedComId: id
		})
	}
	addConnection = () => {
		const {dealNodes, dealRelations} = this.props;
		dealRelations.map(item => {
			const startNode = dealNodes.find(i => i.id == item.associateNode[0].id);
			const endNode = dealNodes.find(i => i.id == item.associateNode[1].id);
			if (item.alias && item.type && startNode && endNode) {
				const nodes = dealNodes.reduce((pre, i) => {
					if (i.alias) {
						return [...pre, {alias: i.alias, label: i.label}]
					} else {
						return pre;
					}
				}, []);
				const relationship = {
					alias: item.alias,
					type: item.type,
					startNode: startNode.alias,
					endNode: endNode.alias,
					direction: item.direction,
					props: item.props
				}
				const criteria = item.criteria;
				const extra = {dealNodes, dealRelations};
				this.props.dispatch(createRelationShip({nodes, relationship, criteria, extra}, (resp) => {
					history.back();
				}))
			}
		})
	}
	getFartherComState = () => {
		return this.state;
	}
	goback = () => {
		history.back()
	}
	render() {
		return (
			<div style={styles.wrapper}>
				<div style={{display: 'flex', height: 40}}>
					<div style={styles.comTitle}>组件</div>
					<div style={{...styles.workSpaceTitle, width: this.state.formType ? 'calc(100% - 335px)' : '100%'}}>工作区</div>
					<div style={{...styles.propertyTitle, display: this.state.formType ? 'block' : 'none'}}>属性</div>
				</div>
				<div style={styles.main}>
					<HandleField updateFormType={this.updateFormType}
											 handleType={this.props.handleType}
											 formType={this.state.formType}
											 selectedComId={this.state.selectedComId}
											 id={this.props.id}
											 getRelationById={getRelationById}/>
					{
						this.state.formType && this.props.currentId ?
						<PropertyEditor handleType={this.props.handleType}
														getFartherComState={this.getFartherComState}
														formType={this.state.formType}
														selectedComId={this.state.selectedComId}
														dealNodes={this.props.dealNodes}
														dealRelations={this.props.dealRelations}
														createdNodesList={this.props.createdNodesList}
														dispatch={this.props.dispatch}
														updateDetail={updateDetail}
														getNode={getNode}
														ref={comp => {this.propertyEditor = comp}}/>
						:
						null
					}
				</div>
				<Row style={{height: 60, borderTop: '1px solid #eee'}}>
					<Button type="primary" className="reedsec_btn" style={{right: 10, top: 10}} onClick={this.addConnection}>确定</Button>
					<Button className="reedsec_btn_default" style={{right: 150, top: 10}} onClick={this.goback}>取消</Button>
				</Row>
			</div>
		)
	}
}

function mapState2Props(state) {
	let { graphData: {relationships, nodes, dealRelations, dealNodes, createdNodesList, currentId} } = state;
	return { relationships, nodes, currentId, dealRelations, dealNodes, createdNodesList };
}
RelationCreator = connect(mapState2Props)(RelationCreator);

export default RelationCreator;
